<template>
  <a-modal
    centered
    :maskClosable="false"
    destroyOnClose
    v-bind="$attrs"
    v-on="$listeners"
    :visible="visible"
    :confirm-loading="confirmLoading"
    width="550px"
    wrapClassName="operate-modal"
    @ok="handleOk()"
    @cancel="handleClose()"
  >
    <div class="operate-modal-container" v-loading="modalLoading">
      <a-form-model
        ref="ruleForm"
        :model="form"
        :rules="type == 0 || type == 1 ? rules : {}"
      >
        <!-- <a-form-model-item label="标段名称">
          <a-input :value="type == 2 ? blockName : block.label" disabled />
        </a-form-model-item> -->
        <a-form-model-item
          ref="materialName"
          label="物料名称"
          prop="materialName"
        >
          <a-input
            :max-length="200"
            v-model="form.materialName"
            :disabled="type == 2"
            placeholder="请输入物料名称"
          />
        </a-form-model-item>
        <a-form-model-item ref="spec" label="规格" prop="spec">
          <a-input
            :max-length="200"
            v-model="form.spec"
            :disabled="type == 2"
            placeholder="请输入规格"
          />
        </a-form-model-item>
        <a-form-model-item ref="model" label="型号" prop="model">
          <a-input
            :max-length="200"
            v-model="form.model"
            :disabled="type == 2"
            placeholder="请输入型号"
          />
        </a-form-model-item>
        <a-form-model-item ref="material" label="材质" prop="material">
          <a-input
            :max-length="200"
            v-model="form.material"
            :disabled="type == 2"
            placeholder="请输入材质"
          />
        </a-form-model-item>
        <a-form-model-item ref="code" label="属性编码" prop="code">
          <a-input
            :max-length="200"
            v-model="form.code"
            :disabled="type == 0 ? false : true"
            placeholder="请输入属性编码"
          />
        </a-form-model-item>

        <a-form-model-item
          ref="goodsNo"
          label="物资编码"
          prop="goodsNo"
          v-if="type != 0"
        >
          <a-input
            :max-length="200"
            v-model="form.goodsNo"
            :disabled="type == 0 ? false : true"
            placeholder="请输入物资编码"
          />
        </a-form-model-item>
        <a-form-model-item ref="category" label="物料大类">
          <a-select
            v-model="category"
            placeholder="请选择物料大类"
            :loading="categoryLoading"
            disabled
            @change="categoryChnage($event)"
          >
            <a-select-option
              :value="item.dicValue"
              v-for="item in categoryList"
              :key="item.dicValue + ''"
            >
              {{ item.dicDesc }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item ref="unit" label="计量单位" prop="unit">
          <a-input
            v-model="form.unit"
            :max-length="200"
            :disabled="type == 2 || unitDisabled || type == 1"
            placeholder="请输入计量单位"
          />
        </a-form-model-item>
        <a-form-model-item ref="supplier" label="供应商" prop="supplier">
          <a-select
            style="width: 308px"
            v-model="form.supplier"
            placeholder="请选择或输入供应商名称"
            show-search
            :disabled="type == 2"
            :loading="supplierLoading"
            @search="search"
          >
            <a-select-option
              :value="item"
              v-for="item in supplierList"
              :key="item"
            >
              {{ item }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <!-- <a-form-model-item ref="price" label="单价" prop="price">
          <a-input
            v-model="form.price"
            :disabled="type == 2"
            :max-length="50"
            placeholder="请输入单价"
          />
          <span class="unit">元</span>
        </a-form-model-item> -->
        <a-form-model-item ref="type" label="物料类型" prop="type">
          <a-select
            v-model="form.type"
            placeholder="请选择物料类型"
            show-search
            :disabled="type == 2"
            :loading="typeLoading"
          >
            <a-select-option
              :value="item.dicValue"
              v-for="item in typeList"
              :key="item.dicValue + ''"
            >
              {{ item.dicDesc }}
            </a-select-option>
          </a-select>
        </a-form-model-item>

        <!-- <a-form-model-item ref="rate" label="税率" prop="rate">
          <a-input
            v-model="form.rate"
            :disabled="type == 2"
            :max-length="20"
            placeholder="请输入税率"
          />
          <span class="unit">%</span>
        </a-form-model-item> -->
      </a-form-model>
    </div>
  </a-modal>
</template>

<script>
import {
  querySupplierList,
  addSupplierList,
  queryMaterialDetails,
  editSupplierList,
} from "@/api/wisdom-beam/material-app";
import { queryConfigDictData } from "@/api/wisdom-beam/material-app";
export default {
  name: "OperateModal",
  props: {
    //物料大类
    category: {
      type: [String, Number],
      default: "",
    },
    visible: {
      type: Boolean,
      default: false,
    },
    //标段
    block: {
      type: Object,
      default: () => {
        return {};
      },
    },
    //操作类型 0新增  1编辑  2查看
    type: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      blockName: "",
      modalLoading: false,
      confirmLoading: false,
      blockLoading: true,
      blockList: [],
      supplierLoading: true,
      supplierList: [],
      supplierValue: "",
      typeLoading: true,
      typeList: [],
      categoryLoading: true,
      categoryList: [],
      unitDisabled: false,
      form: {
        //标段名称
        block: undefined,
        //物料名称
        materialName: undefined,
        //规格
        spec: undefined,
        //计量单位
        unit: undefined,
        //供应商
        supplier: undefined,
        //单价
        price: 0,
        //物料类型
        type: undefined,
        //物料大类
        category: undefined,
        //税率
        rate: 0,
        //型号
        model: "",
        //材质
        material: "",
        //属性编码
        code: "",
        //物资编码
        goodsNo: "",
      },
      rules: {
        block: {
          required: true,
          message: "请选择标段",
          trigger: ["change"],
        },
        materialName: {
          required: true,
          message: "请输入物料名称",
          trigger: ["change", "blur"],
        },
        spec: {
          required: true,
          message: "请输入规格",
          trigger: ["change", "blur"],
        },
        model: {
          required: true,
          message: "请输入型号",
          trigger: ["change", "blur"],
        },
        material: {
          required: true,
          message: "请输入材质",
          trigger: ["change", "blur"],
        },
        code: {
          required: false,
          message: "请输入属性编码",
          trigger: ["change", "blur"],
        },
        goodsNo: {
          required: false,
          message: "请输入物资编码",
          trigger: ["change", "blur"],
        },
        unit: {
          required: true,
          message: "请输入计量单位",
          trigger: ["change", "blur"],
        },
        supplier: {
          required: true,
          message: "请选择或输入供应商名称",
          trigger: ["change", "blur"],
        },
        price: {
          required: true,
          message: "请输入单价",
          trigger: ["change", "blur"],
        },
        type: {
          required: true,
          message: "请选择物料类型",
          trigger: ["change"],
        },
        rate: {
          required: true,
          message: "请输入税率",
          trigger: ["change", "blur"],
        },
      },
    };
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          if (this.type != 2) {
            this.querySupplierList();
            this.queryConfigDictData("material_type");
            this.queryConfigDictData("material_category");
          }
          if (this.type == 1 || this.type == 2) {
            this.queryMaterialDetails();
          }

          if (this.type == 2) {
            this.supplierLoading = false;
            this.typeLoading = false;
            this.categoryLoading = false;
          }
        }
      },
      immediate: true,
    },
    type: {
      handler(val) {},
      immediate: true,
    },
  },
  methods: {
    //监听物料大类选择
    categoryChnage(value) {
      let { extension1 } = this.categoryList.filter(
        (v) => v.dicValue == value
      )[0];
      this.form.unit = extension1;
      if (extension1) {
        this.unitDisabled = true;
      } else {
        this.unitDisabled = false;
      }
    },

    //监听供应商输入
    search(value) {
      if (value) {
        this.form.supplier = value;
      }
    },

    //查询详情
    queryMaterialDetails() {
      this.modalLoading = true;
      queryMaterialDetails({
        id: this.$parent.$data.id,
      })
        .then((res) => {
          let { data } = res;
          let {
            name,
            norms,
            unit,
            supplier,
            price,
            materialType,
            type,
            taxRate,
            orgName,
            model,
            material,
            code,
            goodsNo,
          } = data.result;
          this.blockName = orgName;
          this.form = {
            //物料名称
            materialName: name,
            //规格
            spec: norms,
            //计量单位
            unit: unit,
            //供应商
            supplier: supplier,
            //单价
            price: price,
            //物料类型
            type: materialType,
            //物料大类
            category: type,
            //税率
            rate: taxRate,
            //型号
            model,
            //材质
            material,
            //属性编码
            code,
            //物资编码
            goodsNo,
          };
        })
        .catch((_) => {
          this.form = {
            //物料名称
            materialName: undefined,
            //规格
            spec: undefined,
            //计量单位
            unit: undefined,
            //供应商
            supplier: undefined,
            //单价
            price: undefined,
            //物料类型
            type: undefined,
            //物料大类
            category: undefined,
            //税率
            rate: undefined,
            //型号
            model: "",
            //材质
            material: "",
            //属性编码
            code: "",
            //物资编码
            goodsNo: "",
          };
        })
        .finally((_) => {
          this.modalLoading = false;
        });
    },

    //查询字典列表
    queryConfigDictData(dictType = "") {
      queryConfigDictData({ dictType })
        .then((res) => {
          let { data } = res;
          switch (dictType) {
            case "material_type":
              this.typeLoading = false;
              this.typeList = data.result || [];
              break;

            case "material_category":
              this.categoryLoading = false;
              this.categoryList = data.result || [];
              break;

            default:
              break;
          }
        })
        .catch((_) => {
          switch (dictType) {
            case "material_type":
              this.typeList = [];
              break;

            case "material_category":
              this.categoryList = [];
              break;

            default:
              break;
          }
        })
        .finally((_) => {
          switch (dictType) {
            case "material_type":
              this.typeLoading = false;
              break;

            case "material_category":
              this.categoryLoading = false;
              break;

            default:
              break;
          }
        });
    },

    //查询供应商列表数据
    querySupplierList() {
      this.supplierLoading = true;
      return new Promise((resolve, reject) => {
        querySupplierList({
          orgCode: this.block.key || "",
        })
          .then((res) => {
            let { data } = res;
            data.result = data.result.filter((v) => v);
            this.supplierList = data.result;
          })
          .catch((_) => {
            this.supplierList = [];
          })
          .finally((_) => {
            this.supplierLoading = false;
          });
      });
    },

    //监听标段切换
    blockChange(value) {
      this.form.supplier = undefined;
      this.querySupplierList();
    },

    //关闭弹窗
    handleClose() {
      this.$refs.ruleForm.resetFields();
      this.$emit("update:visible", false);
      this.form = {
        //标段名称
        block: undefined,
        //物料名称
        materialName: undefined,
        //规格
        spec: undefined,
        //计量单位
        unit: undefined,
        //供应商
        supplier: undefined,
        //单价
        price: 0,
        //物料类型
        type: undefined,
        //物料大类
        category: undefined,
        //税率
        rate: 0,
        //型号
        model: "",
        //材质
        material: "",
        //属性编码
        code: "",
        //物资编码
        goodsNo: "",
      };
    },

    //确定
    handleOk() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let { type } = this;
          switch (type) {
            case 0:
              this.addSupplierList();
              break;

            case 1:
              this.editSupplierList();
              break;

            default:
              break;
          }
        } else {
          return false;
        }
      });
    },

    //新增
    addSupplierList() {
      let {
        materialName,
        price,
        rate,
        spec,
        supplier,
        type,
        unit,
        model,
        material,
        code,
      } = this.form;
      let { key } = this.block;
      addSupplierList({
        orgCode: key,
        name: materialName,
        norms: spec,
        supplier,
        unit,
        type: this.category,
        materialType: type,
        price,
        taxRate: rate,
        model,
        material,
        code,
      })
        .then((res) => {
          this.$parent.queryData(this.category);
          this.$message.success("操作成功！");
          this.handleClose();
        })
        .catch((_) => {
          //   this.$message.error("操作失败，请稍后重试！");
        })
        .finally((_) => {
          this.confirmLoading = false;
        });
    },

    //编辑
    editSupplierList() {
      let {
        materialName,
        price,
        rate,
        spec,
        supplier,
        type,
        unit,
        model,
        material,
        code,
        goodsNo,
      } = this.form;
      let { key } = this.block;
      editSupplierList({
        orgCode: key,
        name: materialName,
        norms: spec,
        supplier,
        unit,
        type: this.category,
        materialType: type,
        price,
        taxRate: rate,
        id: this.$parent.$data.id,
        model,
        material,
        code,
        goodsNo,
      })
        .then((res) => {
          this.$parent.queryData(this.category);
          this.$message.success("操作成功！");
          this.handleClose();
        })
        .catch((_) => {
          //   this.$message.error("操作失败，请稍后重试！");
        })
        .finally((_) => {
          this.confirmLoading = false;
        });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.operate-modal {
  .ant-modal-body {
    padding: 0;
    .operate-modal-container {
      height: 510px;
      .custom-scrollbar();
      padding: 20px 0 0 0;
      .ant-form-item {
        .flex();
        .ant-form-item-children {
          position: relative;
          .unit {
            position: absolute;
            right: -20px;
          }
        }
        .ant-form-item-label {
          width: 155px;
          flex-shrink: 0;
        }
        .ant-form-item-control-wrapper {
          flex: 1;
          padding-right: 80px;
        }
      }
    }
  }
  .ant-modal-footer {
    text-align: center;
  }
}
</style>
